<template>
	<div
		@click.self="() => {}"
		class="customButton rounded-pill border px-4 flex-center cursor-pointer flex-shrink-0 position-relative overflow-hidden"
		:class="`${theme ? 'themeBg text-white' : 'text-dark'} ${disabled || loading ? 'disabledBtn' : 'hoveredBtn'}`"
		:style="currentPadding"
	>
		<template v-if="loading">
			<span class="me-2">
				<LoadingCircleIcon :color="loadingColor" width="20" height="20" />
			</span>
		</template>
		<template v-else>
			<span v-if="icon" class="me-2">
				<PlusIcon v-if="icon === 'add'" width="20" height="20" :color="theme ? '#fff' : '#000'" />
				<AddToCollectionIcon v-if="icon === 'collect'" width="20" height="20" :color="theme ? '#fff' : '#000'" />
				<CollectedListIcon v-if="icon === 'collected'" width="20" height="20" :color="theme ? '#fff' : '#000'" />
				<ShareIcon v-if="icon === 'share'" width="20" height="20" :color="theme ? '#fff' : '#000'" />
				<DownloadMusicIcon v-if="icon === 'download'" width="20" height="20" :color="theme ? '#fff' : '#000'" />
			</span>
		</template>

		<slot />
	</div>
</template>

<script lang="ts">
import store from "@/store";
import { computed, defineComponent, PropType, reactive, toRefs } from "vue";
type Size = "default";
type Icon = "play" | "collect" | "collected" | "add" | "download" | "";
export default defineComponent({
	props: {
		size: {
			type: String as PropType<Size>,
			default: "default",
		},
		icon: {
			type: String as PropType<Icon>,
			default: "",
		},
		theme: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		loading: {
			type: Boolean,
			default: false,
		},
	},
	setup(props) {
		const sizeList = [
			{
				type: "default",
				px: "1.5rem",
				py: "0.6rem",
			},
		];
		const state = reactive({
			currentSize: computed(() => sizeList.find((item) => item.type === props.size)),
			themeColor: store.getters.getThemeColor,
		});
		const currentPadding = computed(() => {
			const currentSize = state.currentSize || { px: 0, py: 0 };
			const { px, py } = currentSize;
			return `padding-left: ${px};padding-right: ${px};padding-top: ${py};padding-bottom: ${py};`;
		});
		const loadingColor = computed(() => {
			if (props.theme) {
				return "#fff";
			} else {
				return "#000";
			}
		});
		return {
			...toRefs(state),
			currentPadding,
			loadingColor,
		};
	},
});
</script>

<style scoped lang="scss">
.customButton {
	z-index: 1;
}
.hoveredBtn {
	&:hover {
		&::before {
			z-index: 2;
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba($color: #000000, $alpha: 0.06) !important;
		}
	}
}
.disabledBtn {
	opacity: 0.5;
}
.primaryTheme {
	.themeBg {
		background-color: $primary;
	}
}
.darkTheme {
	.themeBg {
		background-color: $dark;
	}
}
.freeTheme {
	.themeBg {
		background-color: $free;
	}
}
</style>
